<template>
  <div class="echarts-container">
    <el-button @click="changeData()">changeData</el-button>
    <div
      ref="chinaMap"
      class="chinaMap"
      id="echarts"
      style="
        border: solid 1px red;
        background: #0b0873;
      "
    >
      地图1
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import chinaJson from "@/assets/china.json";
export default {
  data(){
    return {
      series: [],
      //中国地理坐标图
      chinaGeoCoordMap: {
        西安: [108.906866, 34.162109],
        柯桥区: [120.476075, 30.078038],
        拉萨: [91.140856, 29.645554],
        沈阳: [123.431474, 41.805698],
        新疆: [87.627704, 43.793026],
        台湾: [121.509062, 25.044332],
        北京: [116.405285, 39.904989],
      },
      chinaDatas: [
        [ { name: "柯桥区", value: 0, }, ],
        [ { name: "拉萨", value: 2, }, ],
        [ { name: "沈阳", value: 1, }, ],
        [ { name: "新疆", value: 1, }, ],
        [ { name: "台湾", value: 1, }, ],
        [ { name: "北京", value: 1, }, ],
      ],
      // 设置投射点 --- 西安
      scatterPos: [108.906866, 34.162109],

    }
  },
  mounted() {
    this.setSerice();
    this.$nextTick(()=>{
      this.drawChina();
    })
  },
  methods: {
    changeData() {
      this.chinaDatas.pop();
      delete this.chinaGeoCoordMap['北京']
      // this.chinaGeoCoordMap.delet('北京');
      console.info(this.chinaDatas, 'chinaDatas')
      console.info(this.chinaGeoCoordMap, 'chinaGeoCoordMap')
      this.drawChina();
    },
    convertData(data){
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = this.chinaGeoCoordMap[dataItem[0].name];
        var toCoord = this.scatterPos;
        if (fromCoord && toCoord) {
          res.push([
            {
              coord: fromCoord,
              value: dataItem[0].value,
            },
            {
              coord: toCoord,
            },
          ]);
        }
      }
      console.log("res", res);
      return res;
    },
    setSerice() {
      let series = [];
      let that = this;
      [["西安", this.chinaDatas]].forEach((item)=> {
        console.log(item, item[0]);
        series.push(
          // 多绘制了一个地图
          // {
          //   //绘制一个新地图
          //   type: "map",
          //   map: "china",
          //   zoom: 1,
          //   center: [105.194115019531, 35.582111640625],
          //   z: -1, // 设置层级 类似于css的zIndex
          //   aspectScale: 0.75, //
          //   itemStyle: {
          //     normal: {
          //       // areaColor: "#f00",
          //       // borderColor: "#090438",
          //       // borderWidth: "2",
          //       // shadowColor: "#090438",
          //       // shadowOffsetX: 0,
          //       // shadowOffsetY: 15,
          //     },
          //   },
          // },
          //设置指向箭头信息
          {
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolSize: 8, //图标大小
            },
            lineStyle: {
              normal: {
                color: "#adffd0",
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: 0.3, //尾迹线条曲直度
              },
            },
            data: that.convertData(item[1]),
          },
          // 发射点位置涟漪等效果
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: "stroke", //波纹绘制方式 stroke, fill
              scale: 4, //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                position: "right", //显示位置
                offset: [5, 0], //偏移设置
                formatter: function (params) {
                  //圆环显示文字
                  return params.data.name;
                },
                fontSize: 13,
              },
              emphasis: {
                show: true,
              },
            },
            symbol: "circle",
            symbolSize: function (val) {
              return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
              normal: {
                show: false,
                color: "#f8f9f5",
              },
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[0].name,
                value: that.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
              };
            }),
          },
          //被攻击点
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              //涟漪相关
              period: 2,
              brushType: "stroke",
              scale: 5,
            },
            label: {
              normal: {
                show: true,
                position: "right",
                // offset:[5, 0],
                color: "#0f0",
                formatter: "{b}",
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
              emphasis: {
                show: true,
                color: "#f60",
              },
            },
            itemStyle: {
              normal: {
                color: "#f00",
              },
            },
            symbol: "circle",
            symbolSize: 10, //圆圈大小
            data: [
              {
                name: item[0],
                value: this.chinaGeoCoordMap[item[0]].concat([10]),
              },
            ],
          }
        );
      });
      return series;
    },
    drawChina() {
      const chinaMap = this.$refs['chinaMap'];
      const disMyChart = echarts.init(document.getElementById('echarts'));
      // 销毁实例，销毁后实例无法再被使用。
      // 在什么情况下需要调用该函数进行销毁当前的实例呢？
      // 官方给的说明:在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，
      disMyChart.dispose();
      let that = this;
      // const chinaMap = this.$refs['chinaMap'];
      const myChart = echarts.init(chinaMap);
      echarts.registerMap("china", chinaJson); //注册可用的地图
      let option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(166, 200, 76, 0.82)",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          formatter: function (params) {
            // console.info(params, "params");
            //根据业务自己拓展要显示的内容
            let res = "";
            let name = params.name;
            let value = params.value[params.seriesIndex];
            res = "<span style='color:#fff;'>" + name + "</span>数据：" + value;
            return res;
          },
        },
        geo: {
          show: true,
          center: [105.194115019531, 35.582111640625],
          map: "china",
          roam: true, //是否允许缩放，拖拽
          zoom: 1, //初始化大小
          //缩放大小限制
          scaleLimit: {
            min: 0.5, //最小
            max: 3, //最大
          },
          //设置中心点
          // center: [95.97, 29.71],
          //省份地图添加背景
          // regions: regions,
          itemStyle: {
            normal: {
              areaColor: "#3352c7",
              color: "red",
              borderColor: "#5e84fd",
              borderWidth: 2,
            },
          },
          label: {
            color: "rgba(255,255,255,0.5)",
            show: false,
          },
          //高亮状态
          emphasis: {
            itemStyle: {
              areaColor: "#ffc601",
            },
            label: {
              show: true,
              color: "#fff",
            },
          },
          z: 10,
        },
        //配置属性
        series: that.setSerice(),
      };
      myChart.setOption(option, true);
    }
  }
}
</script>
<style scoped>
/* .chinaMap {
  transform: rotate3d(1, 0, 0, 35deg);
} */
.echarts-container{
  width: 100%;
  height: 100%;
}
#echarts{
  width: 100%;
  height: 100%;
}
</style>